<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家政服务管理系统</title>
    <!-- 引入Vue.js -->
    <script src="libs/vue/vue.min.js"></script>
    <!-- 引入Element UI -->
    <link rel="stylesheet" href="libs/element-ui/index.css">
    <script src="libs/element-ui/index.js"></script>
    <!-- 引入Axios -->
    <script src="libs/axios/axios.min.js"></script>
    <!-- 引入Font Awesome -->
    <link rel="stylesheet" href="libs/font-awesome/font-awesome.min.css">
    <!-- 引入主样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app">
        <div v-if="isLogin" class="container">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="logo">
                    <h1>家政服务管理系统</h1>
                </div>
                <nav class="menu">
                    <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleMenuSelect">
                        <el-menu-item index="dashboard">
                            <i class="fa fa-tachometer" slot="title"></i>
                            <span slot="title">仪表盘</span>
                        </el-menu-item>
                        <el-menu-item index="users">
                            <i class="fa fa-users" slot="title"></i>
                            <span slot="title">用户管理</span>
                        </el-menu-item>
                        <el-menu-item index="categories">
                            <i class="fa fa-th-list" slot="title"></i>
                            <span slot="title">分类管理</span>
                        </el-menu-item>
                        <el-menu-item index="services">
                            <i class="fa fa-cogs" slot="title"></i>
                            <span slot="title">服务管理</span>
                        </el-menu-item>
                        <el-menu-item index="appointments">
                            <i class="fa fa-calendar" slot="title"></i>
                            <span slot="title">预约管理</span>
                        </el-menu-item>
                        <el-menu-item index="job_applications">
                            <i class="fa fa-briefcase" slot="title"></i>
                            <span slot="title">求职管理</span>
                        </el-menu-item>
                        <el-menu-item index="admins">
                            <i class="fa fa-user-circle" slot="title"></i>
                            <span slot="title">管理员管理</span>
                        </el-menu-item>
                    </el-menu>
                </nav>
                <div class="user-info">
                    <div class="user-avatar">
                        <i class="fa fa-user"></i>
                    </div>
                    <div class="user-details">
                        <div class="username">{{ adminInfo.username }}</div>
                        <div class="logout" @click="logout">
                            <i class="fa fa-sign-out"></i> 退出登录
                        </div>
                    </div>
                </div>
            </aside>
            
            <!-- 主内容区 -->
            <main class="main-content">
                <!-- 顶部导航栏 -->
                <header class="top-nav">
                    <div class="breadcrumb">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item v-if="activeMenu !== 'dashboard'">{{ getMenuName(activeMenu) }}</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="current-time">{{ currentTime }}</div>
                </header>
                
                <!-- 内容区域 -->
                    <div class="content">
                        <!-- 仪表盘 -->
                        <div v-if="activeMenu === 'dashboard'" class="dashboard">
                        <div class="dashboard-cards">
                            <div class="card">
                                <div class="card-icon bg-blue">
                                    <i class="fa fa-users"></i>
                                </div>
                                <div class="card-content">
                                    <div class="card-title">用户总数</div>
                                    <div class="card-value">{{ statistics.users }}</div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-icon bg-green">
                                    <i class="fa fa-cogs"></i>
                                </div>
                                <div class="card-content">
                                    <div class="card-title">服务总数</div>
                                    <div class="card-value">{{ statistics.services }}</div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-icon bg-purple">
                                    <i class="fa fa-th-list"></i>
                                </div>
                                <div class="card-content">
                                    <div class="card-title">分类总数</div>
                                    <div class="card-value">{{ statistics.categories }}</div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-icon bg-orange">
                                    <i class="fa fa-calendar"></i>
                                </div>
                                <div class="card-content">
                                    <div class="card-title">今日预约</div>
                                    <div class="card-value">{{ statistics.todayAppointments }}</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="recent-appointments">
                            <h2>最近预约</h2>
                            <el-table :data="recentAppointments" style="width: 100%">
                                <el-table-column prop="order_no" label="预约单号"></el-table-column>
                                <el-table-column prop="user_name" label="用户"></el-table-column>
                                <el-table-column prop="service_title" label="服务"></el-table-column>
                                <el-table-column prop="appointment_date" label="预约日期"></el-table-column>
                                <el-table-column prop="appointment_time" label="预约时间"></el-table-column>
                                <el-table-column prop="status" label="状态" :formatter="formatStatus"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                        
                        <!-- 用户管理 -->
                        <users v-if="activeMenu === 'users'"></users>
                        
                        <!-- 分类管理 -->
                        <categories v-if="activeMenu === 'categories'"></categories>
                        
                        <!-- 服务管理 -->
                        <services v-if="activeMenu === 'services'"></services>
                        
                        <!-- 预约管理 -->
                        <appointments v-if="activeMenu === 'appointments'"></appointments>
                        
                        <!-- 求职管理 -->
                        <job-applications v-if="activeMenu === 'job_applications'"></job-applications>
                        
                        <!-- 管理员管理 -->
                        <admins v-if="activeMenu === 'admins'"></admins>
                    </div>
            </main>
        </div>
        
        <!-- 登录页面 -->
        <div v-else class="login-container">
            <div class="login-form">
                <h2>管理员登录</h2>
                <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input v-model="loginForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitLogin" :loading="loginLoading" style="width: 100%">登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
    
    <!-- 组件模板 -->
    <script type="text/x-template" id="users-template">
        <div class="users-container">
            <div class="page-header">
                <h2>用户管理</h2>
            </div>
            <div class="search-bar">
                <el-input placeholder="请输入用户名或手机号搜索" v-model="searchText" style="width: 300px; margin-right: 10px"></el-input>
                <el-button type="primary" @click="searchUsers">搜索</el-button>
            </div>
            <el-table :data="usersData" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="nickname" label="用户名"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="status" label="状态" width="200">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" @change="toggleUserStatus(scope.row)"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="注册时间" width="180"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="viewUser(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </script>
    
    <script type="text/x-template" id="categories-template">
        <div class="categories-container">
            <div class="page-header">
                <h2>分类管理</h2>
                <el-button type="primary" @click="showAddDialog">添加分类</el-button>
            </div>
            <el-table :data="categoriesData" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="name" label="分类名称"></el-table-column>
                <el-table-column prop="icon" label="图标" width="100"></el-table-column>
                <el-table-column prop="sort_order" label="排序" width="80"></el-table-column>
                <el-table-column prop="status" label="状态" width="80">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 1" style="color: green">启用</span>
                        <span v-else style="color: gray">禁用</span>
                    </template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteCategory(scope.row.id)" style="color: #f56c6c">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 添加分类弹窗 -->
            <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="500px">
                <el-form :model="categoryForm" :rules="categoryRules" ref="categoryForm">
                    <el-form-item prop="name">
                        <el-input v-model="categoryForm.name" placeholder="请输入分类名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="icon">
                        <el-input v-model="categoryForm.icon" placeholder="请输入图标"></el-input>
                    </el-form-item>
                    <el-form-item prop="sort_order">
                        <el-input v-model.number="categoryForm.sort_order" placeholder="请输入排序号"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addCategory">确定</el-button>
                </div>
            </el-dialog>
            
            <!-- 编辑分类弹窗 -->
            <el-dialog title="编辑分类" :visible.sync="editDialogVisible" width="500px">
                <el-form :model="editForm" :rules="categoryRules" ref="editForm">
                    <el-form-item prop="name">
                        <el-input v-model="editForm.name" placeholder="请输入分类名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="icon">
                        <el-input v-model="editForm.icon" placeholder="请输入图标"></el-input>
                    </el-form-item>
                    <el-form-item prop="sort_order">
                        <el-input v-model.number="editForm.sort_order" placeholder="请输入排序号"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateCategory">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </script>
    
    <script type="text/x-template" id="services-template">
        <div class="services-container">
            <div class="page-header">
                <h2>服务管理</h2>
                <el-button type="primary" @click="showAddDialog">添加服务</el-button>
            </div>
            <div class="search-bar">
                <el-input placeholder="请输入服务名称搜索" v-model="searchText" style="width: 300px; margin-right: 10px"></el-input>
                <el-select v-model="categoryId" placeholder="选择分类" style="width: 150px; margin-right: 10px">
                    <el-option label="全部" value=""></el-option>
                    <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id"></el-option>
                </el-select>
                <el-button type="primary" @click="searchServices">搜索</el-button>
            </div>
            <el-table :data="servicesData" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="title" label="服务标题"></el-table-column>
                <el-table-column prop="category_name" label="分类" width="120"></el-table-column>
                <el-table-column prop="price" label="价格" width="100">
                    <template slot-scope="scope">¥{{ scope.row.price }}</template>
                </el-table-column>
                <el-table-column prop="duration" label="时长" width="100">
                    <template slot-scope="scope">{{ scope.row.duration }}分钟</template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteService(scope.row.id)" style="color: #f56c6c">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
            
            <!-- 添加服务弹窗 -->
            <el-dialog title="添加服务" :visible.sync="addDialogVisible" width="800px">
                <el-form :model="serviceForm" :rules="serviceRules" ref="serviceForm">
                    <el-form-item prop="title">
                        <el-input v-model="serviceForm.title" placeholder="请输入服务标题"></el-input>
                    </el-form-item>
                    <el-form-item prop="category_id">
                        <el-select v-model="serviceForm.category_id" placeholder="选择分类">
                            <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="price">
                        <el-input type="number" v-model="serviceForm.price" placeholder="请输入服务价格"></el-input>
                    </el-form-item>
                    <el-form-item prop="duration">
                        <el-input type="number" v-model="serviceForm.duration" placeholder="请输入服务时长（分钟）"></el-input>
                    </el-form-item>
                    <el-form-item prop="description">
                        <el-input type="textarea" v-model="serviceForm.description" placeholder="请输入服务简介"></el-input>
                    </el-form-item>
                    <el-form-item prop="content">
                        <el-input type="textarea" v-model="serviceForm.content" placeholder="请输入服务详情"></el-input>
                    </el-form-item>
                    <el-form-item prop="provider">
                        <el-input v-model="serviceForm.provider" placeholder="请输入服务人员"></el-input>
                    </el-form-item>
                    <el-form-item prop="image_urls">
                        <el-upload
                            class="upload-demo"
                            action=""
                            :on-change="handleImageChange"
                            :on-remove="handleImageRemove"
                            multiple
                            :auto-upload="false">
                            <el-button slot="trigger" type="primary">选择图片</el-button>
                            <div slot="tip" class="el-upload__tip">支持多图片上传</div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addService">确定</el-button>
                </div>
            </el-dialog>
            
            <!-- 编辑服务弹窗 -->
            <el-dialog title="编辑服务" :visible.sync="editDialogVisible" width="800px">
                <el-form :model="editForm" :rules="serviceRules" ref="editForm">
                    <el-form-item prop="title">
                        <el-input v-model="editForm.title" placeholder="请输入服务标题"></el-input>
                    </el-form-item>
                    <el-form-item prop="category_id">
                        <el-select v-model="editForm.category_id" placeholder="选择分类">
                            <el-option v-for="category in categories" :key="category.id" :label="category.name" :value="category.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="price">
                        <el-input type="number" v-model="editForm.price" placeholder="请输入服务价格"></el-input>
                    </el-form-item>
                    <el-form-item prop="duration">
                        <el-input type="number" v-model="editForm.duration" placeholder="请输入服务时长（分钟）"></el-input>
                    </el-form-item>
                    <el-form-item prop="description">
                        <el-input type="textarea" v-model="editForm.description" placeholder="请输入服务简介"></el-input>
                    </el-form-item>
                    <el-form-item prop="content">
                        <el-input type="textarea" v-model="editForm.content" placeholder="请输入服务详情"></el-input>
                    </el-form-item>
                    <el-form-item prop="provider">
                        <el-input v-model="editForm.provider" placeholder="请输入服务人员"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateService">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </script>
    
    <script type="text/x-template" id="appointments-template">
        <div class="appointments-container">
            <div class="page-header">
                <h2>预约管理</h2>
            </div>
            <div class="search-bar">
                <el-input placeholder="请输入手机号搜索" v-model="searchText" style="width: 300px; margin-right: 10px"></el-input>
                <el-select v-model="status" placeholder="选择状态" style="width: 120px; margin-right: 10px">
                    <el-option label="全部" value=""></el-option>
                    <el-option :label="label" :value="value" v-for="(label, value) in statusMap"></el-option>
                </el-select>
                <el-date-picker v-model="appointmentStartDate" type="date" placeholder="选择预约开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 150px; margin-right: 10px"></el-date-picker>
                <el-date-picker v-model="appointmentEndDate" type="date" placeholder="选择预约结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 150px; margin-right: 10px"></el-date-picker>
                <el-button type="primary" @click="searchAppointments">搜索</el-button>
            </div>
            <el-table :data="appointmentsData" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="user_name" label="用户" width="120"></el-table-column>
                <el-table-column prop="user_phone" label="用户电话" width="120"></el-table-column>
                <el-table-column prop="service_title" label="服务" width="150"></el-table-column>
                <el-table-column prop="appointment_date" label="预约日期" width="120"></el-table-column>
                <el-table-column prop="appointment_time" label="预约时间" width="100"></el-table-column>
                <el-table-column prop="status" label="状态" width="100" :formatter="formatStatus"></el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="viewAppointment(scope.row)">查看</el-button>
                        <el-button type="text" size="small" @click="updateAppointmentStatus(scope.row.id, scope.row.status)" v-if="scope.row.status !== 'completed' && scope.row.status !== 'cancelled'">处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>

            <!-- 更新状态弹窗 -->
            <el-dialog title="更新预约状态" :visible.sync="statusDialogVisible" width="400px">
                <el-form :model="statusForm">
                    <el-form-item label="当前状态">
                        <el-input :value="formatStatus({status: currentStatus})" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="更新为" prop="status">
                        <el-select v-model="statusForm.status">
                            <el-option label="已接单" value="accepted"></el-option>
                            <el-option label="已取消" value="cancelled"></el-option>
                            <el-option label="已完成" value="completed"></el-option>
                            <el-option label="已拒绝" value="rejected"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="statusDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmUpdateStatus">确定</el-button>
                </div>
            </el-dialog>
            
            <!-- 预约详情弹窗 -->
            <el-dialog title="预约详情" :visible.sync="detailDialogVisible" width="600px">
                <div v-if="currentAppointment">
                    <div class="detail-item">
                        <span class="detail-label">订单号：</span>
                        <span class="detail-value">{{ currentAppointment.order_no }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">用户：</span>
                        <span class="detail-value">{{ currentAppointment.user_name }} ({{ currentAppointment.user_phone }})</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">服务：</span>
                        <span class="detail-value">{{ currentAppointment.service_title }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">预约日期：</span>
                        <span class="detail-value">{{ currentAppointment.appointment_date }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">预约时间：</span>
                        <span class="detail-value">{{ currentAppointment.appointment_time }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">服务地址：</span>
                        <span class="detail-value">{{ currentAppointment.address }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">联系电话：</span>
                        <span class="detail-value">{{ currentAppointment.phone }}</span>
                    </div>
                    <div class="detail-item" v-if="currentAppointment.note">
                        <span class="detail-label">备注信息：</span>
                        <span class="detail-value">{{ currentAppointment.note }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">状态：</span>
                        <span class="detail-value">{{ formatStatus(currentAppointment) }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">创建时间：</span>
                        <span class="detail-value">{{ currentAppointment.created_at }}</span>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="detailDialogVisible = false">关闭</el-button>
                </div>
            </div>
            
        </div>
    </script>
    
    <script type="text/x-template" id="admins-template">
        <div class="admins-container">
            <div class="page-header">
                <h2>管理员管理</h2>
                <el-button type="primary" @click="showAddDialog">添加管理员</el-button>
            </div>
            <el-table :data="adminsData" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="created_at" label="创建时间" width="180"></el-table-column>
                <el-table-column label="操作" width="150" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="showEditDialog(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="deleteAdmin(scope.row.id)" style="color: #f56c6c" v-if="scope.row.id !== currentAdminId">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 添加管理员弹窗 -->
            <el-dialog title="添加管理员" :visible.sync="addDialogVisible" width="500px">
                <el-form :model="adminForm" :rules="adminRules" ref="adminForm">
                    <el-form-item prop="username">
                        <el-input v-model="adminForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="adminForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addAdmin">确定</el-button>
                </div>
            </el-dialog>
            
            <!-- 编辑管理员弹窗 -->
            <el-dialog title="编辑管理员" :visible.sync="editDialogVisible" width="500px">
                <el-form :model="editForm" :rules="editRules" ref="editForm">
                    <el-form-item prop="username">
                        <el-input v-model="editForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="editForm.password" placeholder="请输入新密码（不修改请留空）"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateAdmin">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </script>
    
    <!-- 求职管理模板 -->
    <script type="text/x-template" id="job-applications-template">
        <div class="job-applications-content">
            <h2>求职管理</h2>
            <div class="search-bar">
                <el-input v-model="searchText" placeholder="搜索姓名或电话" style="width: 300px;" @keyup.enter.native="searchJobApplications"></el-input>
                <el-select v-model="status" placeholder="状态" style="width: 150px; margin-left: 10px;">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待处理" value="pending"></el-option>
                    <el-option label="已查看" value="reviewed"></el-option>
                    <el-option label="已联系" value="contacted"></el-option>
                    <el-option label="已拒绝" value="rejected"></el-option>
                </el-select>
                <el-button type="primary" @click="searchJobApplications" style="margin-left: 10px;">搜索</el-button>
            </div>
            
            <div class="table-container">
                <el-table :data="jobApplicationsData" stripe style="width: 100%">
                    <el-table-column prop="id" label="ID" width="80"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="120"></el-table-column>
                    <el-table-column prop="phone" label="电话" width="150"></el-table-column>
                    <el-table-column prop="id_card" label="身份证号" width="200"></el-table-column>
                    <el-table-column prop="work_years" label="工作年限" width="100"></el-table-column>
                    <el-table-column prop="work_area" label="工作区域"></el-table-column>
                    <el-table-column prop="status" label="状态" width="100">
                        <template slot-scope="scope">
                            <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="created_at" label="提交时间" width="180"></el-table-column>
                    <el-table-column label="操作" width="200" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="viewJobApplication(scope.row)">查看</el-button>
                            <el-button type="success" size="small" @click="editJobApplication(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="deleteJobApplication(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            
            <div class="pagination-container">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
            
            <!-- 查看详情弹窗 -->
            <el-dialog title="求职详情" :visible.sync="viewDialogVisible" width="60%">
                <div class="job-application-detail">
                    <div class="detail-item">
                        <span class="detail-label">姓名：</span>
                        <span class="detail-value">{{ viewForm.name }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">电话：</span>
                        <span class="detail-value">{{ viewForm.phone }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">身份证号：</span>
                        <span class="detail-value">{{ viewForm.id_card }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">住址：</span>
                        <span class="detail-value">{{ viewForm.address || '-' }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">籍贯：</span>
                        <span class="detail-value">{{ viewForm.birth_place || '-' }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">证书：</span>
                        <span class="detail-value">{{ getCertificatesText(viewForm.certificates) }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">工作年限：</span>
                        <span class="detail-value">{{ viewForm.work_years || 0 }}年</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">工作区域：</span>
                        <span class="detail-value">{{ viewForm.work_area || '-' }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">备注：</span>
                        <span class="detail-value">{{ viewForm.notes || '-' }}</span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">状态：</span>
                        <span class="detail-value"><el-tag :type="getStatusType(viewForm.status)">{{ getStatusText(viewForm.status) }}</el-tag></span>
                    </div>
                    <div class="detail-item">
                        <span class="detail-label">提交时间：</span>
                        <span class="detail-value">{{ viewForm.created_at }}</span>
                    </div>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="viewDialogVisible = false">关闭</el-button>
                </div>
            </el-dialog>
            
            <!-- 编辑弹窗 -->
            <el-dialog title="编辑求职信息" :visible.sync="editDialogVisible" width="60%">
                <el-form :model="editForm" :rules="jobApplicationRules" ref="editForm" label-width="100px">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="editForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                        <el-input v-model="editForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号" prop="id_card">
                        <el-input v-model="editForm.id_card"></el-input>
                    </el-form-item>
                    <el-form-item label="住址">
                        <el-input v-model="editForm.address" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="籍贯">
                        <el-input v-model="editForm.birth_place"></el-input>
                    </el-form-item>
                    <el-form-item label="工作年限">
                        <el-input v-model.number="editForm.work_years" type="number" min="0"></el-input>
                    </el-form-item>
                    <el-form-item label="工作区域">
                        <el-input v-model="editForm.work_area"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="editForm.notes" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="editForm.status">
                            <el-option label="待处理" value="pending"></el-option>
                            <el-option label="已查看" value="reviewed"></el-option>
                            <el-option label="已联系" value="contacted"></el-option>
                            <el-option label="已拒绝" value="rejected"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="editDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="updateJobApplication">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </script>    
    
    <!-- 主脚本 -->
    <script src="js/components.js"></script>
    <script src="js/main.js"></script>
</body>
</html>